<template>
  <PageWrapper title="">
    <XGrid ref="xGrid" is-tree 
    :stripe="false"
    :columns="columns"
    @create="drawer.data.show = true"
    @edit="handleEdit">
      <template #topLeft2>
        <Popconfirm placement="bottom"
          title="提示：重新生成系统按钮。默认会删除再生成，请不要随意操作！确定吗?"
          ok-text="生成"
          cancel-text="取消"
          @confirm="handleGenerate">
          <a>生成按钮</a>
        </Popconfirm>
      </template>
    </XGrid>

    <Drawer :show="drawer.data.show" :is-update="drawer.data.isUpdate"
        :row="drawer.data.row"
        @on-success="onSuccess"
        @on-drawer-close="onDrawerClose"/>
  </PageWrapper>
</template>
<script lang="ts" name="Button" setup>
import {ref, reactive} from 'vue';
import {PageWrapper} from '/@/components/Page';
import {XGrid} from '/@/components/XGrid';
import {columns} from './data';
import Drawer from './Drawer.vue'
import {Popconfirm} from 'ant-design-vue';
import {generate} from '/@/api/admin/button';

const xGrid = ref();

const drawer = reactive({data: {
  show: false,
  isUpdate: false,
  row: null,
}})

const handleEdit = (row_:any) => {
  drawer.data.show = true
  drawer.data.isUpdate = true
  drawer.data.row = row_
}

const onDrawerClose = () => {
  Object.assign(drawer, {data: {}})
}

const onSuccess = () => {
  xGrid.value.reload()
  console.log(xGrid.value.getCheckedList())
  // xGrid.value.clearCheckboxRow()
}

const handleGenerate = () => {
  generate().then(() => {
    onSuccess()
  })
}
</script>
